<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<link href="./bootstrap/css/bootstrap.css" rel="stylesheet" />
		<script src="./bootstrap/js/bootstrap.bundle.js"></script>
		<script src="./js/jquery-3.6.0.min.js"></script>
		<title></title>
	</head>
	<style type="text/css">
		#menu {
			background-color: #6610f2;
			height: 50px;
			color: white;
		}

		#menu>ul>li {
			float: left;
			list-style: none;
			margin-left: 1.25rem;
			padding-top: 10px;
		}

		#searchBar {
			background-color: #777777;
			opacity: 0.8;
			height: 50px;
			position: sticky;
			top: 0px;
		}
		#testbt{
			display: none;
		}
		@media screen and (max-width:500px) {
			#testbt{
				display: block;
			}
		}
	</style>
	<body>
		<div id="menu">
			<ul>
				<li>首页</li>
				<li>关于我们</li>
				<li>新闻列表</li>
				<li>联系我们</li>
				<li>搜索</li>
			</ul>

		</div>
		<div id="searchBar">
			<form method="">
				<div class="container">
					<div class="row">
						<div class="col-6">
							<input type="text" class="form-control" name="" id="" value="" />
						</div>
						<div class="col-3">
							<button class="form-control" id="testbt" type="button">折叠按钮</button>
						</div>
					</div>
				</div>
			</form>

		</div>
		<div id="content" style="height: 2000px;">
			<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
				<li class="nav-item" role="presentation">
					<button class="nav-link active" id="pills-home-tab" data-bs-toggle="pill"
						data-bs-target="#pills-home" type="button" role="tab" aria-controls="pills-home"
						aria-selected="true"  >弹出框</button>
				</li>
				<li class="nav-item" role="presentation">
					<button class="nav-link" id="pills-profile-tab" data-bs-toggle="pill"
						data-bs-target="#pills-profile" type="button" role="tab" aria-controls="pills-profile"
						aria-selected="false">进度条</button>
				</li>
				<li class="nav-item" role="presentation">
					<button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill"
						data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact"
						aria-selected="false">button 例子</button>
				</li>
			</ul>
			<div class="tab-content" id="pills-tabContent">
				<div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">
					
					<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
					  加入vip
					</button>

					<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
					  <div class="modal-dialog">
					    <div class="modal-content">
					      <div class="modal-header">
					        <h5 class="modal-title" id="exampleModalLabel">加入会员</h5>
					        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
					      </div>
					      <div class="modal-body">
					        <h5>Popover in a modal</h5>
					        <p>This <a href="#" role="button" class="btn btn-secondary popover-test" title="Popover title" data-bs-content="Popover body content is set in this attribute.">button</a> triggers a popover on click.</p>
					        <hr>
					        <h5>Tooltips in a modal</h5>
					        <p><a href="#" class="tooltip-test" title="Tooltip">This link</a> and <a href="#" class="tooltip-test" title="Tooltip">that link</a> have tooltips on hover.</p>
					      </div>
					      <div class="modal-footer">
					        <button type="button"  class="btn btn-danger" data-bs-dismiss="modal">暂时不加入</button>
					        <button type="button" class="btn btn-success">确定加入</button>
					      </div>
					    </div>
					  </div>
					</div>
					
					</div>
				<div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">
					
					 <div class="progress">
					   <div class="progress-bar bg-success" role="progressbar" style="width: 87%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">87%</div>
					 </div>
					
					 
					
					
					</div>
				<div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">
					
					   <form>
					     <img class="mb-4" src="/docs/5.0/assets/brand/bootstrap-logo.svg" alt="" width="72" height="57">
					     <h1 class="h3 mb-3 fw-normal">Please sign in</h1>
					 
					     <div class="form-floating">
					       <input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
					       <label for="floatingInput">Email address</label>
					     </div>
					     <div class="form-floating">
					       <input type="password" class="form-control" id="floatingPassword" placeholder="Password">
					       <label for="floatingPassword">Password</label>
					     </div>
					 
					     <div class="checkbox mb-3">
					       <label>
					         <input type="checkbox" value="remember-me"> Remember me
					       </label>
					     </div>
					     <button class="w-100 btn btn-lg btn-primary" type="submit">Sign in</button>
					     <p class="mt-5 mb-3 text-muted">&copy; 2017–2021</p>
					   </form>
					
					
				</div>
			</div>

		</div>
		 
	</body>
</html>
